<template>
	<div class="add-FlowDesign-container">
		<el-dialog title="新增流程图" v-model="isShowDialog" :fullscreen="true" destroy-on-close>
			<bpmn-modeler ref="refNode" :xml="ruleForm.xml" :is-view="false" @save="save" :create-flag="true" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, defineExpose } from 'vue';
import { add, FlowDesign } from '/@/api/flow/flowDesign';
import bpmnModeler from '/@/components/bpmn/index'

const state = reactive({
	isShowDialog: false,
	ruleForm: {
		flowId: '', // 流程id
		name: '', // 流程名称
		xml: '', // xml
		svg: '', // svg
	} as FlowDesign,
});

let success: Function;

// 打开弹窗
const openDialog = (handler: Function) => {
	state.isShowDialog = true;
	success = handler
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
// const onCancel = () => {
// 	closeDialog();
// };
// 新增
const save = (data: FlowDesign) => {
	add(data).then(() => {
		closeDialog();
		success()
	})
};

const { isShowDialog, ruleForm } = toRefs(state)

defineExpose({
	openDialog,
})
</script>